<template>
  <div class="content">
    <button id="myButton" :style="{ top }" @click="handleClick">
      点击下载
    </button>
    <img
      id="QRcode"
      :style="{ width: codeWidth, top: codeTop }"
      src="../assets/download-code1.png"
    />
    <div class="mock" v-if="isWX">
      <img
        class="wx-tip"
        src="../assets/wx-tip.png"
      />
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import service from "@/utils/request.js";

const top = ref("");
const codeWidth = ref("");
const codeTop = ref("");
const url = ref("")
const isWX = ref(false)
document.title = '使命顾问下载'

onMounted(() => {
  // 绑定点击事件
  const width = window.innerWidth;
  top.value = 1.5333 * width + "px";
  codeWidth.value = 0.533 * width + "px";
  codeTop.value = 0.79 * width + "px";
  const ua = navigator.userAgent.toLowerCase();
  isWX.value = ua.indexOf("micromessenger") !== -1;
  getData()
});

const  getData = () => {
  const isIOS= /iPhone|iPad|iPod/i.test(navigator.userAgent);
  service.get("/api/sys/version/get-version", {params: {platform: isIOS?'ios':'android'}}).then(res => {
    url.value = res.data.downloadUrl || ''
  })
}



const handleClick = () => {
  window.location.href = url.value 
};
</script>
<style scoped>
.content {
  min-height: 100vh;
  background-image: url("../assets/bg091301.jpg");
  background-position: left top;
  background-size: 100% auto;
  position: relative;
  background-repeat: no-repeat;
}
button {
  position: absolute;
  top: 550px;
  left: 50%;
  margin-left: -50px;
  width: 120px;
  height: 36px;
  line-height: 18px;
  border-radius: 20px 20px;
  border: none;
  color: #fff;
  background-color: rgb(22, 119, 255);
  font-size: 16px;
}
#QRcode {
  position: absolute;
  top: 300px;
  left: 50%;
  transform: translate(-50%);
  width: 206px;
  /* height: 200px; */
  border-radius: 20px 20px;
  border: none;
  color: #fff;
  font-size: 16px;
}
.mock {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0,0,0, 0.5);
}
.wx-tip{
  width: calc(100vw - 80px);
  position: fixed;
  top: 0;
  left: 50px;
  bottom: 0;
  right: 20px;
  z-index: 99;
}
</style>
